<template>
    <!-- 整体页面 -->
    <div class="home">
        <!-- 左侧页面 -->
        <div class="left">
            <!-- 左侧页面头部 -->
            <div class="left_head">
                <el-button @click="show_save_dialog()">添加栏目</el-button>
                <el-button v-show="this.y_or_n" @click="edit_category()">修改栏目</el-button>
                <el-button v-show="this.y_or_n" @click="deletecategory()">删除栏目</el-button>
            </div>
            <!-- 左侧页面内容 -->
            <div class="left_content">
                <!-- 分类列表 -->
                <el-table :data="category1" style="width: 100%" @row-click="set_article" @row-dblclick="set_form_category">
                    <el-table-column align="center" prop="id" label="编号" width="50"></el-table-column>
                    <el-table-column align="center" prop="parentId" label="父栏目id" width="80"></el-table-column>
                    <el-table-column align="center" prop="name" label="栏目" width="80"></el-table-column>
                    <el-table-column align="center" prop='description' label="栏目说明"></el-table-column>
                </el-table>

                <!-- 新增栏目模态框 -->
                <el-dialog :title="title" :visible.sync="dialog_save_category" width="80%">
                <!-- {{form}} -->
                <el-form :model="form_category">
                    <el-form-item label="栏目名称：" :label-width="formLabelWidth_save" prop="title">
                        <el-input v-model="form_category.name"></el-input>
                    </el-form-item>

                    <el-form-item label="栏目描述：" :label-width="formLabelWidth_save" prop="title">
                        <el-input v-model="form_category.description"></el-input>
                    </el-form-item>

                    <el-form-item label="父栏目id：" :label-width="formLabelWidth_save" prop="title">
                        <el-input v-model="form_category.parentId"></el-input>
                    </el-form-item>
                    {{form_category}}
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel_dialog()">取 消</el-button>
                    <el-button type="primary" @click="save_category()">发 布</el-button>
                </div>
                </el-dialog>
            </div>
        </div>

        <!-- 右侧页面 -->
        <div class="right">
            <!-- 右侧页面头部 -->
            <div class="right_head">
                <el-button @click="save_dialog_show()">发布文章</el-button>
                <el-button @click="edit_article()">修改文章</el-button>
                <el-button @click="delete_article()">删除文章</el-button>
            </div>


                <!-- 发布文章模态框 -->
                <el-dialog :title="title" :visible.sync="dialog_save_article" width="80%">
                <!-- {{form}} -->
                    <el-form :model="form_article1" :rules="rules" class="demo-ruleForm">
                        <el-form-item label="标题" :label-width="formLabelWidth_save" prop="title">
                        <el-input v-model="form_article1.title"></el-input>
                        </el-form-item>

                        <el-form-item label="发表内容" :label-width="formLabelWidth_save">
                        <Tinymce v-model="form_article1.content"></Tinymce>
                        <!-- <el-input type="textarea" v-model="form.content"></el-input> -->
                        </el-form-item>

                        <el-form-item label="所属分类" :label-width="formLabelWidth_save">
                            <el-select v-model="form_article1.categoryId" placeholder="请选择分类">
                                <el-option
                                v-for="item in category1"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel_save()">取 消</el-button>
                        <el-button type="primary" @click="save_article()">发 布</el-button>
                    </div>
                </el-dialog>
            <!-- 右侧页面内容 -->
            <div class="right_content">
                <!-- 文章信息 -->
                <div class="right_content_name">
                    <div>
                        <el-table :data="article1.list" style="width: 100%" :show-header="false">
                            <el-table-column align="center" prop="id" label="编号" width="50"></el-table-column>
                        </el-table>
                    </div>
                    <div>
                        <el-table :data="article1.list" style="width: 100%" :show-header="false">
                            <el-table-column align="center" prop="title" label="文章标题" width="250"></el-table-column>
                        </el-table>
                    </div>
                    <div>
                        <el-table :data="article1.list" style="width: 100%" :show-header="false">
                            <el-table-column align="center" prop="publishTime" label="发布时间">
                                <template v-slot="scope">
                                    {{ scope.row.publishTime | dateFMT }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <!-- 文章内容 -->
                <div class="right_content_content">
                    <el-table :data="article1.list" style="width: 100%">
                        <el-table-column align="center" prop='content' label="文章内容">
                            <template v-slot="scope">
                                <div v-html="scope.row.content"></div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 分页按钮 -->
                <div class="right_content_page">
                    <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="obj1.pageSize"
                    :current-page="obj1.page"
                    @current-change="change"
                    :total="article1.total"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import moment from "moment";
import { mapActions, mapState } from "vuex";
import Tinymce from "../../components/Tinymce";

export default {
    //注册组件
    components: {
        Tinymce,
    },

    computed: {
        ...mapState("category", ["category1","article1"]),
    },
    // 变量
    data() {
        var checkTitle = (rule,value,callback)=>{
            console.log(value);
            if (!value) {
                return callback(new Error("标题不能为空"));
            }
        };
        return {
            form_article: {},
            form_article1: {},
            form_category: {},
            title:"新增分类",
            dialog_save_article:false,
            dialog_save_category:false,
            formLabelWidth_save: "120px",
            y_or_n:false,
            obj1:{
                page:1,
                pageSize:1,
                categoryId:""
            },
            rules:{
                title:[{ validator: checkTitle, trigger: 'blur' }]
            }
        }
    },
    // 方法
    methods: {
        ...mapActions("category", 
            ["findAllCategory",
            "savecategory",
            "delete_category",
            "page_query_article",
            "savearticle",
            "delete_data",
        ]),
        //删除文章
        delete_article() {
            var obj2 = {
                id:this.article1.list[0].id
            }
        this.$confirm('是否删除该文章?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.delete_data(obj2).then((res)=>{
            if (res.status == 200) {
                this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
                })
            }
            this.page_query_article(this.obj1)
            })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            })
            this.page_query_article(this.obj1)     
        })
        },
        //修改按钮
        edit_article() {
            //0.修改标题
            this.title = "修改文章";
            // 1.弹出模态框
            this.dialog_save_article = true;
            // 2.将当前行数据放入模态框
            this.form_article1 = JSON.parse(JSON.stringify(this.article1.list[0]));
        },
        // 发布文章
        save_article() {
            this.savearticle(this.form_article1).then((res) => {
                if (res.status == 200) {
                this.$notify({
                    title: "成功",
                    message: "发布成功",
                    type: "success",
                });
                this.dialog_save_article = false;
                //清空模态框
                this.form_article1 = {};
                } else {
                this.$notify.error({
                    title: "错误",
                    message: res.data.message,
                });
                this.form_article1 = {};
                }
                //刷新页面
                this.page_query_article(this.obj1);
            });
        },
        // 查询栏目
        findAll_category() {
            this.findAllCategory();
        },
        // 查询文章
        set_article(val){
            this.form_article = val
            this.obj1.categoryId = this.form_article.id
            this.page_query_article(this.obj1);
        },
        //页码改变
        change(page) {
            this.obj1.page = page;
            console.log(this.obj1);
        },
        // 新增栏目
        save_category() {
            this.savecategory(this.form_category).then((res) => {
                if (res.status == 200) {
                    this.$notify({
                        title: "成功",
                        message: "发布成功",
                        type: "success",
                    });
                // 关闭模态框
                this.dialog_save_category = false;
                // 隐藏修改、删除按钮
                this.y_or_n = false
                // 清空模态框
                this.form_category = {};
                } else {
                    this.$notify.error({
                        title: "错误",
                        message: res.data.message,
                    });
                }
                // 刷新页面
                this.findAll_category();
            });
        },
        // 修改栏目
        edit_category(val) {
            //0.修改标题
            this.title = "修改栏目";
            // 1.弹出模态框
            this.dialog_save_category = true;
        },
        //删除栏目
        deletecategory() {
            this.$confirm('是否删除第'+ this.form_category.id +'条数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.delete_category(this.form_category).then((res)=>{
                if (res.status == 200) {
                    this.$notify({
                    title: "成功",
                    message: "删除成功",
                    type: "success",
                })
                this.y_or_n = false
                this.form_category = {}
                }
                this.findAll_category(this.form_category);
            })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            })
            this.y_or_n = false       
            })
        },
        // 双击数据，获取id，显示修改、删除按钮
        set_form_category(val) {
        this.form_category = val
        // 显示修改、删除按钮
        this.y_or_n = true
        },
        // 显示新增栏目模态框
        show_save_dialog() {
            this.title = "新增栏目";
            this.dialog_save_category = true;
        },
        // 显示发布文章模态框
        save_dialog_show() {
            this.title = "发布文章"
            this.dialog_save_article = true;
        },
        // 模态框取消按钮事件
        cancel_dialog(){
            this.dialog_save_category = false
            this.y_or_n = false
            this.form_category = {}
        },
        cancel_save(){
            this.dialog_save_article = false
            this.form_article1 = {}
        }
    },
    // 生命周期函数，页面加载完成时运行
    created() {
        this.findAll_category();
        this.page_query_article(this.obj1);
    },
    //监听器
  // 当监听的变量发生变化时,执行监听中的代码
    watch: {
        obj1: {
            handler: function () {
                this.page_query_article(this.obj1);
            },
            deep: true, //表示深度监听
        },
    },
    //过滤器 - 处理日期格式
    filters: {
        dateFMT(str) {
        var res = moment(str).format("YYYY-MM-DD HH:mm:ss");
        return res;
        },
    },
}
</script>

// 页面布局样式
<style scoped>
    /* 页面全局 */
    .home{
        margin: 0;
        padding: 0;
        width: 1100px;
        height: 700px;
        /* position: absolute; */
        background-color: #d3dce6;;
    }

    /* 页面左侧内容 */
    .left{
        width: 540px;
        height: 99%;
        float: left;
        margin: 5px;
        border-radius: 5px;
        position: relative;
        /* background-color: burlywood; */
        border: 1px solid black;
    }
    /* 页面左侧头部 */
    .left_head{
        width: 98%;
        height: 40px;
        margin-left: 5px;
        margin-top: 5px;
        border-radius: 5px;
        /* background-color: cyan; */
    }
    /* 页面左侧头部按钮 */
    .left_head button{
        margin-top: 4px;
    }
    .left_head button:first-child{
        margin-left: 10px;
    }
    /* 页面左侧内容 */
    .left_content{
        width: 98%;
        height: 92%;
        margin: 5px;
        border-radius: 5px;
        /* background-color: darkcyan; */
    }

    /* 页面右侧 */
    .right{
        width: 540px;
        height: 99%;
        float: right;
        margin: 5px;
        position: relative;
        border-radius: 5px;
        /* background-color: burlywood; */
        border: 1px solid black;
    }
    /* 页面左侧头部 */
    .right_head{
        width: 98%;
        height: 40px;
        margin-left: 5px;
        margin-top: 5px;
        border-radius: 5px;
        /* background-color: cyan; */
    }
    /* 页面左侧头部按钮 */
    .right_head button{
        margin-top: 4px;
    }
    .right_head button:first-child{
        margin-left: 10px;
    }
    /* 页面左侧内容 */
    .right_content{
        width: 98%;
        height: 92%;
        margin: 5px;
        border-radius: 5px;
        position: relative;
        /* background-color: darkcyan; */
    }
    .right_content_name{
        width: 98%;
        height: 40px;
        margin: 5px;
        float: right;
        border-radius: 5px;
        /* background-color: tan; */
    }
    .right_content_name div{
        margin: 2.5px;
        border-radius: 5px;
        margin-left: 5px;
        line-height: 35px;
        text-align: center;
        /* background-color: tomato; */
    }
    
    .right_content_name div:nth-child(1){
        width: 80px;
        height: 35px;
        float: left;
        right: 10px;
    }
    .right_content_name div:nth-child(2){
        width: 250px;
        height: 35px;
        float: left;
    }
    .right_content_name div:nth-child(3){
        width: 150px;
        height: 35px;
        float: right;
    }
     .right_content_content{
        width: 98%;
        height: 83.7%;
        margin: 5px;
        margin-top: 0;
        float: right;
        overflow: scroll;
        border-radius: 5px;
        background-color: white;
    }
     .right_content_page{
        width: 98%;
        height: 40px;
        margin: 5px;
        float: right;
        position: absolute;
        bottom:2px;
        border-radius: 5px;
        /* background-color: tan; */
    }
</style>
